import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { View, Text } from '@tarojs/components'
import './index.scss'

import React, { useState, useEffect, useRef } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig, DomEditor } from '@wangeditor/editor'
function MyEditor(props) {
    // console.log(props,'props');

    const {
        value,
        getHtmlContent,
        clear
        // onRef
    } = props
    // editor 实例
    // const [editor, setEditor] = useState<IDomEditor | null>(null)   // TS 语法
    const [editor, setEditor] = useState(null)                   // JS 语法
    // useEffect(() => {
    //     editor.config.onfullscreenchange = function (isFullscreen) {
    //         console.log("isFullscreen: ", isFullscreen);
    //     };
    // }, []);
    // 编辑器内容
    const [html, setHtml] = useState('')

    // const [onRef, setOnRef] = useState('')

    //查看当前工具栏及其排序
    function onChange(editor) {
        const toolbar = DomEditor.getToolbar(editor)
        console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
    }
    // console.log('editor.getAllMenuKeys()',editor.getAllMenuKeys());

    // 模拟 ajax 请求，异步设置 html
    // useEffect(() => {
    // setTimeout(() => {
    //     setHtml('<p>hello world</p>')
    // }, 1500)
    // }, [])

    // 工具栏配置
    // const toolbarConfig: Partial<IToolbarConfig> = { }  // TS 语法
    const toolbarConfig = {}     // JS 语法
    //排除部分菜单
    toolbarConfig.excludeKeys = [
        "blockquote",
        "fontSize",
        "fontFamily",
        "lineHeight",
        "emotion",
        "insertLink",
        'group-image',
        'group-video',
        "insertTable",
        "codeBlock",
        "divider",
        // 'headerSelect',
        // 'group-more-style' // 排除菜单组，写菜单组 key 的值即可
    ]


    // toolbarConfig.toolbarKeys = [
    // 菜单 key
    // 'headerSelect',

    // 分割线
    // '|',

    // 菜单 key
    // 'bold', 'italic',
    // 菜单组，包含多个菜单
    // {
    //     key: 'group-more-style', // 必填，要以 group 开头
    //     title: '更多样式', // 必填
    //     iconSvg: '<svg>....</svg>', // 可选
    //     menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
    // },
    // ]

    // 编辑器配置
    // const editorConfig: Partial<IEditorConfig> = {    // TS 语法
    const editorConfig = {                         // JS 语法
        placeholder: '请输入内容',
        MENU_CONF: {},
    }
    //最大可输入字符数
    // editorConfig.maxLength = 15000;

    editorConfig.MENU_CONF['fontSize'] = {
        fontSizeList: [
            // 元素支持两种形式
            //   1. 字符串；
            //   2. { name: 'xxx', value: 'xxx' }
    
            '12px',
            '16px',
            { name: '24px', value: '24px' },
            '40px',
        ]
    }

    editorConfig.MENU_CONF['lineHeight'] = {
        lineHeightList: ['1', '1.5', '2', '2.5']
    }

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    //初始值
    useEffect(() => {
        if (value) {
            setHtml(value)
        } else {
            setHtml('')
        }
        // if(clear == true){
        //     setHtml('')
        // }
    }, [value, clear])

    // useEffect(()=>{
    //     if (this.props.onRef) {
    //         console.log(1212);
    //     // setOnRef(onRef);
    //  }
    // },[onRef])

    // 自定义校验链接
    // function customCheckLinkFn(text: string, url: string): string | boolean | undefined {   // TS 语法
    function customCheckLinkFn(text, url) {                                              // JS 语法

        if (!url) {
            return
        }
        if (url.indexOf('http') !== 0) {
            return '链接必须以 http/https 开头'
        }
        return true

        // 返回值有三种选择：
        // 1. 返回 true ，说明检查通过，编辑器将正常插入链接
        // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
        // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
    }

    // 自定义转换链接 url
    // function customParseLinkUrl(url: string): string {   // TS 语法
    function customParseLinkUrl(url) {                // JS 语法

        if (url.indexOf('http') !== 0) {
            return `http://${url}`
        }
        return url
    }

    // 插入链接
    editorConfig.MENU_CONF['insertLink'] = {
        checkLink: customCheckLinkFn, // 也支持 async 函数
        parseLinkUrl: customParseLinkUrl, // 也支持 async 函数
    }
    // 更新链接
    editorConfig.MENU_CONF['editLink'] = {
        checkLink: customCheckLinkFn, // 也支持 async 函数
        parseLinkUrl: customParseLinkUrl, // 也支持 async 函数
    }

    return (
        <>
            <View style={{ zIndex: 9, width: '100%' }}>
                <View className='rich-text-title'>
                    <Text ><Text className='must-fill'>*</Text>内容</Text>
                </View>
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    // onChange={editor => { setHtml(editor.getHtml()); getHtmlContent(editor.getHtml());onChange(editor) }}
                    onChange={editor => { setHtml(editor.getHtml()); getHtmlContent(editor.getHtml()); }}
                    mode="default"
                    style={{ height: '164px'}}
                />
            </View>
        </>
    )
}

export default MyEditor